<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>{{text}}</h1>
    <div v-text="text"></div>
    <hr/>
    <!--ctrl + d 向下复制一行-->
    <button v-on:click="fun01">按钮1</button>
    <button @click="fun01">按钮2</button>
    <hr/>
    <h1 v-if="isTrue">红红火火恍恍惚惚</h1>
    <button @click="isTrue = !isTrue">替换</button>
    <h1 v-show="!isTrue"> 哒哒哒哒哒哒</h1>
    <hr/>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
    <ol>
        <li v-for="item in list1">{{item.name}}</li>
    </ol>
    <hr/>
    <input v-model="inputValue">
    <button @click="fun02">更改</button>
</div>
<script>
    let app = new Vue({
        //挂载点
        el: '#app',
        //vdata  定义变量的地方  ctrl + alt + l 格式化
        data() {
            return {
                text: 'h1标签',
                isTrue: true,
                list: ['张三1', '张三2', '张三3', '张三4', '张三5',],
                list1: [
                    {
                        name: "张三1",
                    },
                    {
                        name: "张三2"
                    },
                    {
                        name: "张三3"
                    }
                ],
                inputValue: ''
            }
        },
        // vmethod  定义方法的地方
        methods: {
            // fun01 方法名字
            fun01() {
                console.log(123)
            },
            fun02(){
                console.log('原来输入框的内容: ',this.inputValue)
                this.inputValue = '新的内容'
            }
        },
    })
</script>

</body>
</html>